<template>
	<view>
		<view>
			<view>
				<view class="mingpian">
					<view class="_a">
						<view style="padding-top: 10rpx;">
							<view>
								<u--image :src="get_img+infor.header" height="35rpx" width="35rpx" mode="scaleToFill"></u--image>
							</view>
							<view class="cp_name">{{sys.cpy_name}}</view>
						</view>
						<view class="cp_infor">
							<view class="cp_inname">{{infor.name}}</view>
							<view class="cp_inzw">{{infor.work}}</view>
						</view>
						<view class="_b">
							<view>
								<view class="gw_infor">
									<u-icon name="phone" top="7rpx" labelPos="top"></u-icon>
									<view>
										<view class="gw_phone">{{infor.phone}}</view>
									</view>
								</view>
							</view>
							<view class="_c">
								<view class="gw_infor">
									<u-icon name="email" top="7rpx" labelPos="top"></u-icon>
									<view>
										<view class="gw_phone">{{infor.mail}}</view>
									</view>
								</view>
							</view>
							<view class="_c">
								<view class="gw_infor">
									<u-icon name="map" top="7rpx" labelPos="top"></u-icon>
									<view>
										<view class="gw_dz">{{infor.address}}</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view style="float: right;margin: 25rpx 20rpx 0 0;">
						<u--image :src="get_img+infor.header" width="300rpx" height="350rpx"></u--image>
					</view>
				</view>

			</view>
			<view>
				<view class="_c1">
					<view class="_c2" @click="call_custom">
						<view class="boda_phone">
							<view class="_c3" style="margin-left: 18rpx;">
								<view class="_d3">
									<u-icon name="phone-fill" color="#17A234" size="40rpx" top="5rpx"></u-icon>
								</view>
								<view class="bodadianhua">拨打电话</view>
							</view>
							<view class="wx_phone">
								<view class="dianhua">{{infor.phone}}</view>
							</view>
						</view>
					</view>
					<view class="_c2" @click="call_phone">
						<view class="boda_phone">
							<view class="_c3" style="margin-left: 20rpx;">
								<view class="_d3" style="width: 40rpx;height: 30rpx;margin-top: 15rpx;">
									<image src="../../static/icon/zuoji_phone.png" class="phone_img"></image>
								</view>
								<view class="bodadianhua">座机电话</view>
							</view>
							<view class="wx_phone">
								<view class="dianhua">{{infor.landline}}</view>
							</view>
						</view>
					</view>
					<view class="_c2" @click="copy">
						<view class="boda_phone">
							<view class="_c3" style="margin-left: 15rpx;">
								<view class="_d3">
									<u-icon name="weixin-fill" color="#17A234" size="40rpx" top="5rpx"></u-icon>
								</view>
								<view class="bodadianhua">加我微信</view>
							</view>
							<view class="wx_phone">
								<view class="dianhua">{{infor.wx}}</view>
							</view>
						</view>
					</view>

					<!-- 	<view class="_c2">
						<view class="boda_phone">
							<view class="_c3">
								<view class="_d3">
									<u-icon name="map-fill" color="#17A234" size="40rpx" top="5rpx"></u-icon>
								</view>
								<view class="boda_ph ph">地址导航</view>
							</view>
							<view class="wx_phone">
								<view class="dianhua shenglue">{{infor.address}}</view>
							</view>
						</view>
					</view> -->

				</view>
				<!-- 头像 -->
				<view class="gw_header">
					<view class="header" v-for="(item,index) in infor.through" :key="index" v-if="index<9">
						<u-avatar :src="item.user.avatar" shape="square" size="60rpx"></u-avatar>
					</view>
					<view class="dianzan">
						<u-icon v-if="!infor.is_star" name="heart" size="60rpx" @click="dianzan"></u-icon>
						<u-icon v-else name="heart-fill" color="#FF0000" size="60rpx" @click="dianzan"></u-icon>
					</view>
				</view>
				<!-- 浏览 -->
				<view class="liulan">
					<view class="liulan_p">最近{{infor.through.length}}人浏览</view>
					<view class="liulan_n">靠谱：{{infor.star.length}}</view>
				</view>
				<!-- 个性签名 -->
				<view class="geqian">
					<view class="geqian_n">个性签名</view>
					<view>
						<view class="geqian_nei">{{infor.sign}}</view>

					</view>
					<!-- 标签 -->
					<view v-for="(item,index) in infor.label" :key="index" style="">
						<view class="gw_teg">
							<u-tag :text="item" size="mini" bgColor="#16A438"></u-tag>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<!-- 详细介绍 -->
				<view>
					<view class="introduce">详细介绍：
						<view class="_c" style="width: 750rpx;height: auto;">
								<u-parse :content="infor.content"></u-parse>
							<view style="height: 100rpx;"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<BtNav :adviser="infor" v-if="infor"></BtNav>

	</view>
</template>

<script>
	import BtNav from '@/components/bottom_nav/bottom_nav.vue'
	export default {
		components: {
			BtNav
		},
		data() {
			return {
				infor:"",
				sys: {},
				get_img: this.$get_img,
				custom: {},
				src: "",
				id: "",
				list: [],
				data: {},
			}
		},
		onLoad(option) {
			this.sys = uni.getStorageSync("sys")
			this.custom = uni.getStorageSync("hxxq_custom")
			let id=""
			if(option.id){
				id=option.id
			}
			this.get_custom(id)
		},
		methods: {
			bgFunc() {
				return this.custom_bg != '' ? this.sys.custom_bg : this.sys.sys_background
			},
			get_custom(id) {
				let that=this
				this.$model.get("user/common/get_adviser?id="+id).then(res => {
					if (res.code == 200) {
						that.infor = res.data
					}
				})
			},
			chat() {
				uni.navigateTo({
					url: '../chat/chat'
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.infor.phone
				})
			},
			dianzan() {
				let that = this
				this.$model.get("user/common/star_custom?aid=" + this.infor.id).then(res => {
					if (res.code == 200) {
						that.infor = res.data
					}
				})
			},
			call_custom() {
				uni.makePhoneCall({
					phoneNumber: this.infor.phone
				})
			},
			call_phone() {
				uni.makePhoneCall({
					phoneNumber: this.infor.landline
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.infor.wx,
					success: function() {
						console.log('success');
					}
				})
			},
		}
	}
</script>

<style>
	.tag {
		width: 150rpx;
		margin: 5rpx;

	}

	.buttom {
		position: fixed;
		bottom: 0;
		left: 0;


	}

	.tab {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.icon p {
		margin: -65rpx -80rpx 5rpx 0;
		font-size: 30rpx;
	}

	.icon button {
		width: 260rpx;
		height: 70rpx;
		font-size: 20rpx;
		position: absolute;
		/* margin: 250rpx 26rpx 200rpx 0; */
	}

	.icon {
		position: absolute;
	}

	.image {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}

	.image1 {
		width: 100vw;
		height: 220px;
	}

	.infor {
		background-color: rgba(f, f, f, 1);
		margin: 30rpx 0 0 50rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.introduce {
		margin-top: 50rpx;
		height: 20rpx;
		margin-left: 15rpx;
	}

	.erweima {
		width: 80rpx;
		margin-left: 50rpx;
		float: right;
	}

	.erweima_ {
		width: 150rpx;
		height: 150rpx;
	}

	.infor_1 {
		height: 100rpx;
		width: 100rpx;
		float: right;
		padding: 20rpx 80rpx 0 0;
	}

	.infor_2 {
		width: 500rpx;
		padding-top: 20rpx;
	}

	.mingpian {
		width: 700rpx;
		height: 400rpx;
		background-color: #ffffff;
		margin: 20rpx 25rpx 20rpx 25rpx;
		box-shadow: 1rpx 1rpx 15rpx 10rpx #EBEBEB;
		border-radius: 5rpx;
	}

	._a {
		width: 320rpx;
		height: 390rpx;
		margin-left: 10rpx;
		float: left;
	}

	._c {
		margin-top: 20rpx;
	}

	._c1 {
		height: auto;
		overflow-x: scroll;
		width: 725rpx;
		overflow-y: hidden;
		white-space: nowrap;
		margin-left: 30rpx;
	}

	._c2 {
		margin-left: 10rpx;
		display: inline-block;

	}

	._c3 {
		margin-left: 30rpx;
		margin-top: 6rpx;
	}

	._c4 {
		padding: 30rpx 0rpx 0 0;
	}

	._c5 {
		margin-right: 50rpx;
	}

	._d3 {
		padding: 20rpx 0rpx 0rpx 10rpx;
	}

	.cp_name {
		margin: -25rpx 70rpx 0 0;
		width: 200rpx;
		float: right;
		font-size: 20rpx;
	}

	.cp_infor {
		width: 300rpx;
		height: 100rpx;
		margin-top: 40rpx;
	}

	.phone_icon {
		width: 35rpx;
		height: 28rpx;
	}

	.phone_img {
		width: 30rpx;
		height: 25rpx;
		margin-bottom: 15rpx;
	}

	.cp_inname {
		font-size: 35rpx;
		margin: 0rpx 0rpx 8rpx 20rpx;
	}

	.cp_inzw {
		font-size: 20rpx;
		margin-left: 20rpx;
	}

	._b {
		width: 320rpx;
		height: 150rpx;
		background-color: #ffffff;
		margin-top: 40rpx;
	}

	.bodadianhua {
		margin-left: 10rpx;
		font-size: 20rpx;
		color: #959595;
		float: right;
		margin: -30rpx 60rpx 0 0;
	}

	.gw_infor {
		width: 40rpx;
		height: 40rpx;
		border-radius: 25rpx;
		margin: -10rpx 0 0 20rpx;
		background-color: #EAEAEA;
	}

	.gw_phone {
		color: #3D3D3D;
		font-size: 23rpx;
		float: left;
		margin: -25rpx 0rpx 0 49rpx;
	}

	.gw_dz {
		width: 15rpx;
		color: #3D3D3D;
		font-size: 23rpx;
		float: left;
		margin: -25rpx 0rpx 0 49rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 280rpx;
	}

	.boda_phone {
		box-shadow: 0rpx 0rpx 10rpx 2rpx #EBEBEB;
		border-radius: 7rpx;
		float: left;
		width: auto;
		display: inline-block;
		margin: 20rpx 10rpx 0 0rpx;
		background-color: #F7F7F7;
		height: auto;
		border-style: solid;
		border-color: #EBEBEB;
		height: 135rpx;
		margin-top: 6rpx;
	}

	.boda_ph {
		font-size: 20rpx;
		color: #959595;
		float: right;
		margin: -30rpx 60rpx 0 0;
	}

	.ph {
		margin-right: 48rpx;
	}

	.dianhua {
		font-size: 25rpx;
		color: #2F2F2F;
		margin-bottom: 20rpx;
		text-align: center;
		margin-right: 100rpx;
		font-weight: 500;
		margin-top: 10rpx;
	}

	.shenglue {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dianhuak {
		width: 180rpx;
		margin-top: 5rpx;
		margin-left: 10rpx;
	}

	.zj_phone {
		width: 180rpx;
		margin-left: 29rpx;
		margin-top: 5rpx;
	}

	.wx_phone {
		width: 180rpx;
		margin-left: 29rpx;
		margin-top: 5rpx;
	}

	.gw_header {
		margin-top: 50rpx;
		width: 720rpx;
		height: 65rpx;
	}

	.header {
		float: left;
		width: 40rpx;
		height: 40rpx;
		margin-left: 30rpx;
	}

	.liulan {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}

	.liulan_p {
		font-size: 22rpx;
	}

	.liulan_n {
		font-size: 22rpx;
		float: right;
		margin-top: -27rpx;
		margin-right: 10rpx;
	}

	.geqian {
		margin-top: 40rpx;
		width: 690rpx;
		margin-left: 30rpx;
	}

	.geqian_n {
		font-size: 30rpx;
	}

	.geqian_nei {
		font-size: 25rpx;
		margin-top: 30rpx;
	}

	.gw_teg {
		float: left;
		width: auto;
		height: 50rpx;
		display: inline-block;
		margin: 25rpx 0 0 10rpx;
	}

	.line {
		width: 750rpx;
		height: 20rpx;
		background-color: #F4F6F8;
		margin: 120rpx 0 10rpx 0;
	}

	.dianzan {
		width: 60rpx;
		height: 60rpx;
		float: right;
		margin-top: 7rpx;
	}
</style>
